<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 23:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SCL回访记录页面</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
</head>
<body>

<%--表格中的单元格工具--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>

<%-- 添加/编辑时用到的form表单 --%>
<form class="layui-form" action=""  id="saveVisitForm" style="display: none"  lay-filter="updateVisitRecord">
    <input type="hidden" name="id" id="id">

    <div class="registerbox-title" >更新回访记录</div>

    <div class="layui-form-item">
        <label class="layui-form-label">回访人</label>
        <div class="layui-input-inline">
            <input type="text" name="username"  lay-verify="required" autocomplete="off" readonly class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">修改内容</label>
        <div class="layui-input-inline">
            <textarea class="layui-textarea" placeholder="请输入回访内容" name="record" id="record" lay-verify="required"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="remark"  lay-verify="required"
                   placeholder="请输入备注" autocomplete="off"
                   class="layui-input" id="remark">
        </div>
    </div>

    <%-- from表单中最下面的按钮 --%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSaveVisit">提交</button>
        </div>
    </div>
</form>

<%--模糊查询的form表单--%>
<form class="layui-form" action="">
    <%--返回按钮--%>
    <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs layui-icon layui-icon-return" onClick="window.history.back(-1)"></button>
    <%--刷新页面按钮--%>
    <button class="layui-btn layui-btn-radius layui-btn-xs layui-btn-warm layui-icon layui-icon-refresh-1" onClick="document.location.reload()"></button>

    <div class="layui-inline">
        <label class="layui-form-label">回访人名字</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入回访人名字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" placeholder="请输入回访人电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">执行计划</label>
        <div class="layui-input-inline">
            <input type="text" name="planname" placeholder="请输入计划名字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">创建人名字</label>
        <div class="layui-input-inline">
            <input type="text" name="createby" placeholder="请输入创建人名字" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 显示所有做题记录的table --%>
<table class="layui-hide" id="test" lay-filter = "test"></table>

<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        table.render({
            elem: '#test',
            page:true,
            limit:10,
            limits:[10,20,30,40],
            url:'${pageContext.request.contextPath}/tSclVisitRecord/queryAll', //表格了里面所需要的数据就是一个list里面有很多的map、对象
            cellMinWidth:100, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {type:'numbers',title:'序号'},
                // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                {field:'id', title: 'ID',width: 65, sort: true},
                {field:'username', title: '回访人',width: 95, sort: true},
                //{field:'recordid', title: '测试的id', sort: true},
                {field:'tel', title: '电话',width: 130, sort: true},
                {field:'planname', title: '测试的计划',width: 120, sort: true},
                {field:'record', title: '回访内容',width:300, sort: true},
                {field:'remark', title: '备注', sort: true},
                {field:'createtime', title: '创建时间',width:160, sort: true},
                {field:'createby', title: '创建人',width: 95, sort: true},
                {field:'updatetime', title: '修改时间',width:160, sort: true},
                {field:'updateby', title: '修改人',width: 95, sort: true},
                {fixed:'right', title:'操作', width: 70, toolbar: '#barDemo'}
            ]]
        });

        //模糊查询事件
        form.on('submit(formDemo)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //alert(JSON.stringify(data.field))
            table.reload('test', {
                //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                where: data.field,//排序字段
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听行工具（编辑修改）事件
        //触发单元格工具事件
        table.on('tool(test)', function(obj){
            var data=obj.data;
            switch(obj.event){
                case 'edit'://编辑
                    layer.open({
                        type: 1,
                        area: ['400px', '350px'],
                        offset: '100px',
                        content:$("#saveVisitForm"),
                        cancel: function(index, layero){
                            layer.close(index);
                            $("#saveVisitForm").hide();
                            return false;
                        }
                    });
                    form.val('updateVisitRecord',data);
                    break;
            };
        });

        //监听 提交
        //Layui提交表单  data代表的是form表单里面的所有的内容
        form.on('submit(formSaveVisit)', function(data){
            if(namestatus){
                layer.alert(JSON.stringify(data.field));
                $.ajax({
                    url:'${pageContext.request.contextPath}/tSclVisitRecord/addOrUpdateVisitRecord',
                    type:"post",
                    dataType:"JSON",
                    data:data.field,//表单里所有数据
                    success:function (ret){
                        if (ret.data == true){
                            //关闭所有弹框
                            layer.closeAll();
                            layer.msg("提交成功")
                            //刷新页面
                            table.reload('test');
                        }
                    }
                })
            }
            return false;
        });
    });
</script>

</body>
</html>
